
<template>
  <!-- 首页点击进入的-图片 -->
  <div class="climateConain">
    <nut-overlay v-model:visible="modalshow" :overlay-style="{
      backgroundColor: 'rgba(0, 0, 0, .2)'
    }" :close-on-click-overlay="false">
      <!-- <div class="wrapper">
        <div class="content" @click.stop="show = false;"></div>
      </div> -->
    </nut-overlay>
    <div class="climateContainTabContainer">
      <div class="climateContainTab">
        <span v-for="item in tabData" :key="item.id" :class="[activeTab == item.id?'active':'']" @click.native="tabClick(item)">{{item.label}}</span>
      </div>
    </div>
    
    <div class="climateContainHoursContain">
     <div class="climateContainHours">
        <span v-for="item in hoursData" :key="item.id" :class="[activeHour == item.id?'active':'']"  @click.native="hourClick(item)">{{item.label}}</span>
     </div>
     <div class="climateContainTime">
      <div class="climateContainTimeSingle">
        <!-- <nut-icon name="../assets/images/calendar.png" size="15" color="#d5d5d5"></nut-icon> -->
        <span class="calendar"></span>
        <nut-cell title="" :desc="desc" @click="show = true"></nut-cell>
        <nut-datepicker v-model="currentDate" title="日期时间选择" type="datehour"  @confirm="confirm" :formatter="formatter" v-model:visible="show" ></nut-datepicker> 
      </div>
      <div class="climateContainTimeSingleRefresh">
        <span class="switch" @click="setNewDate()"></span>
        <!-- <nut-icon name="retweet" size="20"></nut-icon> -->
      </div>
      <div class="climateContainTimeSingleBtn">
        <div class="date_picker_left24" @click="changeTime(24)">24h</div> 
        <div class="date_picker_left1" @click="changeTime(1)">1h</div>
        <div class="date_picker_right1" @click="changeTime(-1)">1h</div>
        <div class="date_picker_right24" @click="changeTime(-24)">24h</div>
      </div>
     </div>
    </div>
    <div class="climateTitle" ><div class="title1">{{activeProduct.label}}实况</div></div>
    <div class="imgContain">
      <nut-image :src="imgPath"></nut-image>
    </div>
    <div class="rankContentText">{{ rankContent }}</div>
    <div class="climateTitle"><div class="title2">{{projectConfig.cityName}}{{activeProduct.label}}排名</div>
    </div>
    <div class="tableContain">
      <nut-table :columns="tablecolumns" :data="tableData"></nut-table>
    </div>
    <nut-backtop @click="handleClick" ></nut-backtop>
  </div>
</template>

<script setup lang="ts">
import { majorStationTable, majorContent, findPng } from '@/api/skMountiorApi'
import projectConfig from "@/config/projectConf.js";
import moment from "moment";
//遮罩显示
const modalshow = ref(false);

//tab切换数据
const tabData = ref([
  {id:'TP','label':'降水',orderBy: 'desc',unit:'(mm)'},
  {id:'MAXT','label':'最高气温',orderBy: 'desc',unit:'(℃)'},
  {id:'MINT','label':'最低气温', orderBy: 'asc',unit:'(℃)'},
  {id:'MAX_HOUR','label':'极大风',orderBy: 'desc',unit:'(m/s)'}
])
const activeProduct = ref(tabData.value[0]);
const activeTab = ref("TP");
const tabClick = (item)=>{
  if(activeTab.value != item.id){
    activeProduct.value = item;
    activeTab.value = item.id;
    getData();
  }
}

//小时数据
const activeHour = ref("1");
const hoursData = ref([
{id:'1','label':'1小时'},
{id:'3','label':'3小时'},
{id:'6','label':'6小时'},
{id:'12','label':'12小时'},
{id:'24','label':'24小时'},
])
const hourClick = (item)=>{
  if(activeHour.value != item.id){
    activeHour.value = item.id;
    getData();
  }
}


//设置日期
let time = "";
if (moment().minutes() >= 15) {
  time  = moment().format("YYYY-MM-DD HH:00:00")
} else {
  time  = moment().subtract(1, 'h').format("YYYY-MM-DD HH:00:00")
}

//time = "2024-03-22 14:00:00";
const show = ref(false);
const desc = ref(moment(time).format("YYYY年MM月DD日 HH时"));
let currentDate = new Date(time);
// currentDate.value = time;
const formatter = (type: string, option) => {
  switch (type) {
    case 'year':
      option.text += '年';
      break;
    case 'month':
      option.text += '月';
      break;
    case 'day':
      option.text += '月';
      break;
    case 'hour':
      option.text += '时';
      break;
    default:
      option.text += '';
  }
  return option;
};
const confirm = ( { selectedValue, selectedOptions } )=>{
 const date = selectedValue.slice(0, 3).join('-');
 const time = selectedValue.slice(3).join(':');
 desc.value = moment(date + ' ' + time).format("YYYY年MM月DD日 HH时");
 getData();
}
const setNewDate = ()=>{
  let newTime = "";
  if (moment().minutes() >= 30) {
    newTime  = moment().format("YYYY-MM-DD HH:00:00")
  } else {
    newTime  = moment().subtract(1, 'h').format("YYYY-MM-DD HH:00:00")
  }
  desc.value = ref(moment(time).format("YYYY年MM月DD日 HH时"));
  currentDate = new Date(newTime);
}
const changeTime = (time)=>{
  let newTime = moment(currentDate).subtract('hours',time);
  currentDate = new Date(moment(newTime).format("YYYY-MM-DD HH:00:00"));
  desc.value = moment(newTime).format("YYYY年MM月DD日 HH时");
  getData();
}


//查詢數據
const getData =()=>{
  modalshow.value = true;
  const promises = [getRankTable(), getRankContent(), getRankImg()]
  Promise.all(promises).then(() => {
    modalshow.value = false;
  })
}


/**获取排名列表信息 */
let tablecolumns = []
const tableData = ref([]);
const getRankTable = ()=>{
  tablecolumns = [
    { title: '排名', key: 'num',align: 'center',
    render: (data) => {
          return h(
            'div',
            {
              class: {
                firstIcon: data.num == 1,
                secondIcon: data.num == 2,
                thirdIcon: data.num == 3,
              }
            },
            Number(data.num)>3?data.num:''
          );
        }
      },
    { title: '站名', key: 'name',align: 'center'},
    { title: '区域', key: 'area',align: 'center'},
  ]
  tablecolumns.push(
    { title: activeProduct.value.label+activeProduct.value.unit, key: 'val',align: 'center'}
  )
  return new Promise((resolve) => {
    majorStationTable({
      eleType: activeTab.value == "TP" ? (activeTab.value+activeHour.value+"H"):activeTab.value,
      orderBy: activeProduct.value.orderBy,
      time: moment(currentDate).format("YYYY-MM-DD HH"),
      num: 10,
      interval:activeHour.value
    }).then((res:any) => {
      if (res.code === 200) {
        tableData.value = res.data
      } else {
        tableData.value = []
      }
      resolve()
    })
  })
}


const rankContent = ref("")
/**获取排名统计信息 */
const getRankContent = ()=>{
  return new Promise((resolve) => {
    majorContent({
      eleType: activeTab.value == "TP" ? (activeTab.value+activeHour.value+"H"):activeTab.value,
      time: moment(currentDate).format("YYYY-MM-DD HH"),
      interval:activeHour.value
    }).then((res:any) => {
      res.code === 200 ? rankContent.value = res.msg : rankContent.value = ""
      resolve()
    })
  })
}

/**获取排名图片 */
const imgPath = ref("")
const getRankImg = ()=>{
  return new Promise((resolve) => {
    findPng({
      eleType: activeTab.value == "TP" ? (activeTab.value+activeHour.value+"H"):activeTab.value,
      time: moment(currentDate).format("YYYY-MM-DD HH"),
      interval:activeHour.value
    }).then((res:any) => {
      if (res.code === 200) imgPath.value = "xuzhou/proxy/" + res.msg
      resolve()
    })
  }) 
}

//回到顶部
const handleClick = () => {
  console.log('触发返回顶部');
};

onMounted(() => {
  getData();
});

onUnmounted(() => {
});
</script>
<style lang="scss">
.climateContainTime{
  position: relative;
  .nut-cell{
    background: transparent !important;
    box-shadow: none;
    margin: 0px;
    padding:0px;
    .nut-cell__value--alone{
      color:#fff;
      line-height: 25px;
      padding-right: 5px;
      font-size: 13px;
    }
  }
  // .climateContainTimeSingle{
  //   // .nut-icon{
  //   //   position: absolute;
  //   //   top: 7px;
  //   //   left: 5px;
  //   // }
  // }
}
.climateConain{
  .nut-table__main__head__tr--border{
    border: none;
  }
  .nut-table__main__body{
    color: #000;
    background: #fff;
  }
  .nut-table__main__head{
    color: #fff;
    background: #2c50ae;
  }
  .nut-table__main__body__tr__td{
    padding:5px 0px;
  }
  .nut-backtop.show{
    width: 40px;
    height: 40px;
    right:25px !important;
  }
  .firstIcon{
    width: 100%;
    height: 15px;
    background-size: 30%;
    background-image: url('@/assets/images/icon_no1.png');
    background-repeat: no-repeat;
    background-position: center center;
  }
  .secondIcon{
    width: 100%;
    height: 15px;
    background-size: 40%;
    background-image: url('@/assets/images/icon_no2.png');
    background-repeat: no-repeat;
    background-position: center center;
  }
  .thirdIcon{
    width: 100%;
    height: 15px;
    background-size: 40%;
    background-image: url('@/assets/images/icon_no3.png');
    background-repeat: no-repeat;
    background-position: center center;
  }
}
</style>
<style scoped lang="scss">
.climateConain{
  width: 100%;
  min-height: 200px;
  color:#d5d5d5;
  font-size: 16px;
  
  .climateContainTabContainer{
    width: 100%;
    height: 50px;
    align-items: flex-end;
    display: flex;
    background: url('@/assets/images/bg.png') right bottom no-repeat #4574eb;
    .climateContainTab{
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      margin: 0px 10px;
      >span{
        flex: 1;
        text-align: center;
        &.active{
          font-weight: bold;
          color:#fff;
          border-bottom:2px solid #fff;
        }
      }
    }
  }
 
 
  .climateContainHours{
    height: 35px;
    line-height: 35px;
    display: flex;
    >span{
      flex: 1;
      text-align: center;
      &.active{
        font-weight: bold;
        color:#fff;
        border-bottom:2px solid #fff;
      }
    }
  }
  .climateContainHoursContain{
    background: #2c50ae;
    .climateContainHours{
      margin: 0px 10px;
      margin-bottom: 5px;
    }
    .climateContainTime{
      margin: 0px 10px;
      display: flex;
      height: 30px;
      line-height: 30px;
      .climateContainTimeSingle{
        width: 170px;
        border:1px solid #fff;
        border-radius: 3px;
        display:flex;
        height: 25px;
        .calendar{
          height: 23px;
          width: 25px;
          position: absolute;
          top: 1px;
          left: 0px;
          background: url('@/assets/images/calendar.png') center center no-repeat;
        }
      }
      .climateContainTimeSingleRefresh{
        position: relative;
        width: 36px;
        text-align: center;
        .switch{
          display: inline-block;
          width: 36px;
          height: 29px;
          background-image: url('@/assets/images/Switch.png');
          background-position: center 4px;
          background-repeat: no-repeat;
          background-size: 60%;
        }
      }
      .climateContainTimeSingleBtn{
        flex: 1;
        display: flex;
        color: #fff;
        line-height: 23px;
        height: 25px;
        div{
          // flex: 1;
          margin-right: 5px;
          border:1px solid #fff;
          border-radius: 3px;
          font-size: 13px;
          background-repeat: no-repeat;
          text-align: center;
          background-size: 13px 13px;
          &.date_picker_left24{
            background-image: url('@/assets/images/icon_left_act2.png');
            background-position: 2px center;
            padding-left: 10px;
            text-align: right;
            width: 30px;
          }
          &.date_picker_left1{
            background-image: url('@/assets/images/icon_left_acthour.png');
            background-position: 2px center;
            padding-left: 10px;
            text-align: right;
            width: 20px;
          }
          &.date_picker_right1{
            background-image: url('@/assets/images/icon_right_acthour.png');
            background-position: right center;
            text-align: left;
            width: 30px;
          }
          &.date_picker_right24{
            background-image: url('@/assets/images/icon_right_act2.png');
            background-position: right center;
            text-align: left;
            width: 40px;
          }
        }
      }
    }
  }
  .climateTitle{
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 70px;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000;
    justify-content: center;
    display: flex;
    >div{
      width: 320px;
      font-weight: bold;
      &.title1{
        background-image: url("@/assets/images/titleBg1.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }
      &.title2{
        background-image: url("@/assets/images/titleBg2.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }
      position: relative;
    }
  }
  .rankContentText{
    background: #fff;
    color: #000;
    margin:10px;
    text-indent: 2em;
  }
  .tableContain,.imgContain{
    padding:0px 10px;
  }
}
</style>
